<template>
  <view class="root">
    <view class="project-list">
      <view class="item" v-for="(item,i) in list" :key="i" @click="handleGoodsClick(item)">
        <image class="cover" :src="item.cover"></image>
        <text class="text-cut2 name">{{ item.goodsName }}</text>
        <view class="money">
          <text class="light">￥</text>
          <text class="light num">{{ item.price }}</text>
          <text class="line">￥{{ item.linePrice }}</text>
        </view>
        <view class="title">{{ item.comName }}</view>
        <starts :value="item.score" read-only/>
      </view>
    </view>
    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";

export default {
  name: "list",
  components: {ListLoadOver, ListLoading, ListEmpty, Starts},
  data() {
    return {
      page: 0,
      list: [],
      loadOver: false,
      loading: false,
      keyword: '',
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.keyword = options.keyword
    uni.setNavigationBarTitle({title: options.keyword})
    this.getList();
  },
  methods: {
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;

      this.loading = true;
      let data = {
        page: ++this.page,
        keyword: this.keyword,
      };
      Api.getGoods(data).then(res => {
        this.list.push(...res);
        if (res.length < 10) this.loadOver = true;
      }).finally(() => {
        this.loading = false;
      })
    },
    handleGoodsClick(item) {
      uni.navigateTo({url: `/pages/shop/goods/detail?id=${item.id}`})
    }
  },
}
</script>

<style scoped lang='scss'>
.root{
  width: 100%;
  overflow-x: hidden;
}
.project-list {
  $gap: r(15px);
  margin-top: r(20px);
  width: calc(100% + #{$gap});
  padding: r(0 15px);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-wrap: wrap;


  .item {
    width: calc(50% - #{$gap});
    margin-right: $gap;
    margin-top: $gap;

    .cover {
      height: r(350px);
      border-radius: r(12px);
    }

    .name {
      margin: r(25px 0);
      font-size: r(28px);
      color: #333333;
    }

    .money {
      font-size: r(20px);
      color: #909090;

      .light {
        color: #E83E3C;
      }

      .num {
        font-size: r(30px);
      }

      .line {
        margin-left: r(15px);
        text-decoration: line-through;
      }
    }

    .title {
      font-size: r(22px);
      font-weight: 500;
      color: #909090;
    }
  }
}

</style>